<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">系统公告</h2>
      <button class="text-primary text-sm hover:underline" @click="viewAllAnnouncements">更多</button>
    </div>
    <div class="p-4">
      <div class="space-y-4">
        <div class="flex" v-for="(announcement, index) in announcements" :key="index">
          <div class="min-w-[24px] mr-3">
            <span class="inline-block w-2 h-2 rounded-full" :class="announcement.colorClass + ' mt-2'"></span>
          </div>
          <div>
            <div class="font-medium text-sm">{{ announcement.title }}</div>
            <div class="text-xs text-gray-500 mt-1">{{ announcement.date }}</div>
            <p class="text-sm text-gray-600 mt-1 line-clamp-2">{{ announcement.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        {
          title: '系统维护通知',
          date: '2023-05-15',
          content: '将于5月20日凌晨2点至4点进行系统维护，期间部分服务可能受到影响，请提前做好准备。',
          colorClass: 'bg-primary'
        },
        {
          title: '新功能上线',
          date: '2023-05-10',
          content: '新增云存储扩容一键操作功能，支持批量管理多个存储实例，提升操作效率。',
          colorClass: 'bg-success'
        },
        {
          title: '安全漏洞修复',
          date: '2023-05-05',
          content: '已修复部分安全漏洞，建议所有用户及时更新相关组件以确保系统安全。',
          colorClass: 'bg-warning'
        }
      ]
    };
  },
  methods: {
    viewAllAnnouncements() {
      // 查看全部公告逻辑
      console.log('查看全部公告');
    }
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bg-primary {
  background-color: #3b82f6;
}
.bg-success {
  background-color: #10b981;
}
.bg-warning {
  background-color: #f59e0b;
}
</style>